<template>
	<el-dialog title="下载报告" class="peak-dialog" v-model="showModal" :width="800" :close-on-click-modal="false">
		<el-form class="params-form" ref="paramsFormRef" :inline="true" label-position="left" label-width="100px">
			<el-form-item class="form-item" label="报告格式:" prop="reportType">
				<el-radio-group v-model="paramsForm.reportType">
					<el-radio :value="item.value" v-for="(item, index) in docList" :key="index">{{ item.name }}</el-radio>
				</el-radio-group>
			</el-form-item>
		</el-form>
		<template #footer>
			<span class="dialog-footer">
				<el-button @click="handleCancel">取 消</el-button>
				<el-button type="primary" @click="handleSure" v-throttle>确 定</el-button>
			</span>
		</template>
	</el-dialog>
</template>
<script name="WebReportDownModal" setup>
import global from '@/utils/global'
import fileDownload from 'js-file-download'

const props = defineProps({
	url: {
		type: String,
	},
	eventType: {
		type: String, //1：敏感词; 2：挂马; 3：DNS解析; 4：篡改
	},
	docList: {
		type: Array,
		default: () => [
			{ name: 'PDF', value: 1 },
			{ name: 'Word', value: 2 },
			{ name: 'HTML', value: 3 },
		],
	},
})
const state = reactive({
	showModal: false,
	paramsFormRef: null,
	paramsForm: {
		reportType: 1,
		scanTarget: '',
	},
})

const { showModal, paramsFormRef, paramsForm } = toRefs(state)

const handleSure = () => {
	global.$fetchGetDownFile(props.url + `?eventType=${props.eventType}&reportType=${state.paramsForm.reportType}&scanTarget=${state.paramsForm.scanTarget}`).then(data => {
		state.showModal = false
		fileDownload(data, `${state.paramsForm.scanTarget}.${state.paramsForm.reportType == 1 ? 'zip' : state.paramsForm.reportType == 2 ? 'zip' : 'zip'}`)
	})
}
const handleCancel = () => {
	state.showModal = false
}
const handleShowModal = row => {
	state.paramsForm.scanTarget = row.scanTarget
	state.showModal = true
}

defineExpose({
	handleShowModal,
})
</script>
<style lang="scss" scoped>
.el-dialog__body {
	padding-top: 10px !important;
}
.data-item {
	padding-top: 8px;
	padding-bottom: 8px;
	border-bottom: 1px solid #e8eaec;
	&.data-item {
		border-bottom: 0px;
	}
}
.upload-excel {
	margin-top: 20px;
	border: 1px dashed #dcdee2;
	.upload-excel-box {
		padding: 16px;
		width: 100%;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		cursor: pointer;
		.upload-block {
			margin-left: 16px;
			.title {
				font-size: 18px;
				color: #0052cc;
				text-align: left;
				margin-bottom: 4px;
			}
			.cont {
				font-size: 12px;
			}
			.t1 {
				font-size: 16px;
			}
			.t2 {
				font-size: 16px;
			}
		}
	}
}
</style>
